<div class="tooltip-wrapper">
  <button class="tooltip-button">
    <span class="tooltip-text">Hover me</span>
  </button>
  <div class="tooltip-content">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <path
        d="M13 13h-2v-2h2v2zm0 4h-2v-2h2v2zm1-18h-8v2h8v-2zm0 20h-8v-2h8v2zm5.5-7h-2v-2h2v2zm-7 0h-2v-2h2v2zm1-10h-2v6h2v-6zm6.5 5.5h-1.5v1.5h1.5v-1.5zM4.5 16.5h1.5v1.5h-1.5v-1.5zm12-5h-2v-2h2v2zm-4 4h-2v-2h2v2zm5-3h-2v-2h2v2zm-7 0h-2v-2h2v2zm-3-5h-2v2h2v-2zm-4 8.5h1.5v1.5h-1.5v-1.5zm4.5-12h-2v2h2v-2zm10 1h-2v2h2v-2zm-7 3h-2v2h2v-2zm6 5h-2v-2h2v2zm-7-6h-2v-2h2v2zM6 13H4v-2h2v2zm12 6h-2v-2h2v2zM9 4H7v2h2V4zm11 0h-2v2h2V4z"
      ></path>
    </svg>
    Uiverse.io
  </div>
</div>

<style>
/* From Uiverse.io by kyle1dev  - Tags: tooltip */
.tooltip-wrapper {
  position: relative;
  display: inline-block;
}
.tooltip-wrapper .tooltip-content {
  visibility: hidden;
  background: linear-gradient(to right, #000, #333);
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 12px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  opacity: 0;
  transition:
    visibility 0s linear 0.4s,
    opacity 0.4s ease,
    transform 0.4s ease;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.tooltip-wrapper:hover .tooltip-content {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s;
}
.tooltip-wrapper:not(:hover) .tooltip-content {
  visibility: visible;
  transition-delay: 0s, 0.4s;
}
.tooltip-button {
  background: linear-gradient(to right, #333, #000);
  border: none;
  color: white;
  padding: 15px 30px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  transition:
    background 0.3s ease,
    box-shadow 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}
.tooltip-button:hover {
  background: linear-gradient(to right, #000, #333);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.7);
}
.tooltip-button:active {
  background: #222;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  transform: scale(0.95);
}
.tooltip-button .tooltip-text {
  position: relative;
  display: inline-block;
  transition: transform 0.4s ease;
}
.tooltip-button:hover .tooltip-text {
  transform: translateY(-10px);
}
.tooltip-content svg {
  fill: #fff;
  width: 16px;
  height: 16px;
}

</style>
    